﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <style>
        .content {
            width: 1210px;
            margin: 0px auto;
        }
        .flex {
            display: flex;
        }

        .a-c {
            align-items: center;
        }

        .j-s {
            justify-content: center;
        }

        .toolbar {
            padding: 10px 15px;
            width: 700px;
        }

        .toolbar div {
            height: 38px;
        }

        .tcContent {
            width: 550px;
            margin: 0 auto;
            border: 0;
            height: 450px;
            background: #f4f4f4;
            padding: 5px 15px;
        }

        .tcContent .header {
            padding: 20px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="content">
        <table id="mytable" lay-filter="test"></table>
    </div>


    <script type="text/html" id="mytoolbar">
        <div class="flex toolbar a-c">
            <button class="layui-btn layui-btn-sm" style="display: block; margin-right: 50px;" lay-event="add">添加</button>

            课程名:&nbsp;
            <input type="text" id="search" placeholder="请输入课程名查询" autocomplete="off" class="layui-input" style="height: 30px; width: 200px;">
            <button class="layui-btn layui-btn-sm" style="margin-left: 30px;" onclick="search()">搜索</button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="resetSearch()" style="margin-left: 30px;">重置</button>
        </div>
    </script>

    <script type="text/html" id="mybar" >
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit" style="border-radius: 6px;width:80px">课程分配</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" style="border-radius: 6px; width:80px">删除</a>
    </script>

    @*添加弹除页面开始  *@
    <div style="display: none; padding: 20px;" id="saveOrUpdateDiv">
        <form class="layui-form" lay-filter="dataFrm" id="dataFrm" style="margin-top:20px">

            @*<div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">编号：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="id" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>*@

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">课程编号：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="courseCode" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">课程名称：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>


            <div class="layui-form-item" style=" margin-top:30px">
                <div class="layui-input-block">
                    <button type="button"
                            class="layui-btn layui-btn-normal  layui-icon layui-icon-upload-circle"
                            lay-filter="doSubmit" lay-submit="">
                        提交
                    </button>
                    <button type="reset"
                            class="layui-btn  layui-btn-warm layui-btn-primary layui-icon layui-icon-refresh">
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
    @*添加弹除页面结束  *@


    @* 课程分配弹出页面开始 *@
    <div class="tcContent" id="tc" style="display: none;">
        <div class="header">
            <h1 id="tcTitle"></h1>
        </div>
        <div style="text-align: center;">
            <div id="test1"></div>
        </div>
    </div>
    @* 课程分配弹出页面结束 *@

    <script src="~/Content/layui/layui.js"></script>
    <script>

        var mydata;
        var search;
        var searchString = "";
        var resetSearch;

        layui.use(['table', 'jquery', 'form', 'transfer','layer'],
            function () {
                var table = layui.table;
                var $ = layui.jquery;
                var form = layui.form;
                var transfer = layui.transfer;
                var layer = layui.layer;


                $('#search').val(searchString);

                search = function () {
                    searchString = $('#search').val();
                    tableIns.reload({
                        where: { search: searchString }
                    });
                    $('#search').val(searchString);
                }

                resetSearch = function () {
                    searchString = "";
                    tableIns.reload({
                        where: { search: "" }
                    });
                    $('#search').val(searchString);
                }

                let tableOptions = {
                    elem: '#mytable',
                    height: 650,
                    url: "/api/getcourseinfo",
                    where: { search: "" },
                    page: true, //开启分页
                    defaultToolbar: ['print'],
                    limit: 12,
                    toolbar: '#mytoolbar',
                    cols: [
                        [//表头
                            { type: 'checkbox', fixed: 'left' },
                            { type: 'numbers', width: 80 },
                            { field: 'id', title: 'ID', width: 80, fixed: 'left', hide: true, align: 'center' },
                            { field: 'code', title: '课程编号', width: 360, align: 'center' },
                            { field: 'name', title: '课程名称', width: 360, align: 'center' },
                            { toolbar: '#mybar', title: '操作', width: 356, align: 'center' },
                        ]
                    ]
                }

                //第一个实例
                var tableIns = table.render(tableOptions);

                //监听工具栏事件
                table.on('toolbar(test)',
                    function(obj) {
                        switch (obj.event) {
                        case 'add':
                            layer.msg('添加');
                            openAddUser();
                            break;
                        }
                    });

                var url;
                var mainIndex;
                //打开添加页面
                function openAddUser() {
                    mainIndex = layer.open({
                        type: '1',
                        title: '添加用户',
                        content: $("#saveOrUpdateDiv"),
                        area: ['400px', '323px'],
                        success: function (index) {
                            url = "user/addUser.action";
                        }
                    });
                }

                //提交
                form.on("submit(doSubmit)",
                    function(obj) {
                        //序列化表单数据
                        var params = $("#dataFrm").serialize();
                        //alert(params);
                        $.post("/api/insertcourse",
                            params,
                            function(obj) {
                                layer.msg("课程添加成功！");
                                //关闭弹出层
                                layer.close(mainIndex);
                                //刷新数据表格
                                layer.reload(tableIns);
                            });
                    });

                //监听行工具事件
                table.on('tool(test)',
                    function (obj) {
                        var data = obj.data;
                        var courseID = obj.data.id;
                        var layEvent = obj.event;
                        if (layEvent === 'del') {
                            layer.confirm('真的删除行么',
                                function (index) {
                                    obj.del();
                                    layer.close(index);
                                    $.post()

                                });
                        } else if (layEvent === 'edit') {
                            layer.open({
                                title: "编辑",
                                type: 1,
                                success: function () {
                                    $('#tcTitle').text(data.name);
                                    $.get('/api/getcourseteacher',
                                        { courseID: data.id },
                                        function (res) {
                                            transfer.render({
                                                elem: '#test1', //绑定元素
                                                title: ["所有教师", "任课老师"],
                                                data: res.allTeacher,
                                                parseData: function (res) {
                                                    return {
                                                        "value": res.id //数据值
                                                        ,
                                                        "title": res.name //数据标题
                                                        ,
                                                        "disabled": false //是否禁用
                                                        ,
                                                        "checked": false //是否选中
                                                    }
                                                },
                                                value: res.courseTeacherIDs,
                                                id: 'demo1', //定义索引
                                                showSearch: true,
                                                onchange: function (data, index) {
                                                    var tLoad = layer.load();
                                                    let teacherIdList = [];
                                                    data.map(t => teacherIdList.push(t.value));
                                                    if (index) {
                                                        // 取消任教资格
                                                        $.ajax({
                                                            url: "/api/removecourseaddteacher",
                                                            type: "POST",
                                                            data: { "tl": teacherIdList, courseID }
                                                        });

                                                    } else {
                                                        // 添加任教资格
                                                        $.ajax({
                                                            url: "/api/givecourseaddteacher",
                                                            type: "POST",
                                                            data: { "tl": teacherIdList, courseID }
                                                        });

                                                    }
                                                    layer.close(tLoad);
                                                }
                                            });

                                        });
                                },
                                area: '580px',
                                content: $('#tc')//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                            });
                        }
                    });

            });
    </script>
</body>
</html>
